@extends('wap.layout.base')
@section('scripts')
    <script>
        let app = new Vue({
            el: '#app',
            data: function() {
                return {
                    title: '注 册',
                    form: {
                        username: '',
                        code: '',
                        avatar: "{{ $setting['default_avatar'] }}",
                        password: '',
                        password_confirmation: '',
                        email: '',
                        _token:"{{csrf_token()}}"
                    },
                    smsTime: 60,
                    smsSend: 1,
                    smsMsg: '短信验证码',
                }
            },
            methods: {
                register() {
                    let that = this;
                    if(!this.form.username){
                        this.$toast('请填写手机号');return false;
                    }
                    if(!this.form.code){
                        this.$toast('请填写验证码');return false;
                    }
                    if(!this.form.password){
                        this.$toast('请填写密码');return false;
                    }
                    if(this.form.password.length<6){
                        this.$toast('密码的长度不能小于6位');return false;
                    }
                    if(!this.form.password_confirmation){
                        this.$toast('请再次输入密码');return false;
                    }
                    if(this.form.password_confirmation != this.form.password){
                        this.$toast('密码两次输入不一致');return false;
                    }
                    if(!this.form.email){
                        this.$toast('请填写邮箱');return false;
                    }
                    $.post("{{ route('wap.auth.register') }}",this.form,function(res){
                        if(res.code){
                            that.$toast(res.msg);
                        }else{
                            that.$toast.loading({
                                duration: 0,       // 持续展示 toast
                                forbidClick: true, // 禁用背景点击
                                loadingType: 'spinner',
                                message: '注册成功'
                            });
                            setTimeout(function(){
                                that.$toast.clear();
                                window.location.href = res.data;
                            }, 2000);
                        }
                        return false;
                    });
                },
                onClickLeft() {
                    window.location.href = "{{ route('wap.auth.login') }}";
                },
                send(){
                    let reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
                    if(!this.form.username){
                        this.$toast('请填写手机号');return false;
                    }
                    if(!reg.test(this.form.username)){
                        this.$toast('请输入有效的手机号码');return false;
                    }
                    if(this.smsSend){
                        let that = this;
                        $.post("{{ route('wap.auth.sms') }}",{mobile:this.form.username,_token:"{{csrf_token()}}",},function(res){
                            if(res.code){
                                that.$toast(res.msg);
                            }else{
                                that.smsSend = 0;
                                let timer = setInterval(function(){
                                    that.smsMsg = "<em style='font-style: normal;color: red'>"+that.smsTime + "</em> 秒后重新获取";
                                    that.smsTime--;
                                    if (that.smsTime < 1) {
                                        that.smsTime = 60;
                                        that.smsSend = 1;
                                        that.smsMsg = "短信验证码";
                                        clearInterval(timer);
                                    }
                                }, 1000);
                            }
                        });
                    }
                    return false;
                }
            }
        });
    </script>
@endsection
@section('content')
    <div class="container main auth login" id="app" v-cloak>
        <div class="row">
            <van-nav-bar
                    :title="title"
                    left-text=""
                    border
                    fixed="true"
                    left-arrow="false"
                    @click-left="onClickLeft">
                <van-icon name="arrow-left" slot="left"/>
            </van-nav-bar>
            <div class="auth-bg"></div>
            <div class="col-xs-12">
                <div class="auth-form">
                    <img class="auth-form-logo" src="{{ $setting['wap_logo'] }}" alt="">
                    <div class="auth-login-menu">
                        <ul>
                            <li class="li-login"><a href="{{ route('wap.auth.login') }}">登录</a></li>
                            <li class="li-register"><a class="active">注册</a></li>
                        </ul>
                    </div>
                    <p><em>*</em>手机号</p>
                    <van-cell-group>
                        <van-field v-model="form.username" placeholder="请输入手机号" />
                    </van-cell-group>
                    <p><em>*</em>验证码</p>
                    <van-cell-group>
                        <van-field
                                v-model="form.code"
                                center
                                clearable
                                placeholder="请输入短信验证码">
                            <span @click="send()" class="sms-code" slot="button" v-html="smsMsg"></span>
                        </van-field>
                    </van-cell-group>
                    <p><em>*</em>密码</p>
                    <van-cell-group>
                        <van-field type="password" v-model="form.password" placeholder="请输入密码" />
                    </van-cell-group>
                    <p><em>*</em>确认密码</p>
                    <van-cell-group>
                        <van-field type="password" v-model="form.password_confirmation" placeholder="请再次输入密码" />
                    </van-cell-group>
                    <p><em>*</em>邮箱</p>
                    <van-cell-group>
                        <van-field v-model="form.email" placeholder="请输入邮箱" />
                    </van-cell-group>
                    <p class="form-forget">
                        已有账号？<a href="{{ route('wap.auth.login') }}">立即登录</a>
                    </p>
                    <p class="form-submit">
                        <van-button type="default" @click="register()">注 册</van-button>
                    </p>
                </div>
            </div>
        </div>
    </div>
@endsection

